import { useComms } from "../../hook/comms";
import _ from "lodash";
import { useEffect } from "react";
import React, { Fragment, useState } from 'react';
import { useHistory } from "react-router";
import { useAllTypes } from "../../hook/allTypes"
import {
    Form,
    Input,
    Button,
    Card,
    message,
    Cascader,
    InputNumber,
    Modal,
    Breadcrumb
} from 'antd';
const { TextArea } = Input;

const formItemLayout = {
    labelCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 8,
        },
    },
    wrapperCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 16,
        },
    },
};
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0,
        },
        sm: {
            span: 16,
            offset: 8,
        },
    },
};


// eslint-disable-next-line
export default () => {
    const history = useHistory()
    const [, { addComm }] = useComms();
    const [allType, { getAllTypes }] = useAllTypes();
    // const history = useHistory();
    // 指向输入框
    const [form] = Form.useForm();
    const [comm, setComm] = useState({});
    const onFinish = async (values) => {
        const { name, count, price, desc, type } = values
        console.log(type);
        const data = await addComm({ name, count, price, childId: type[1], isAttend: false, desc, image: [] })
        if (data) {
            setComm(data)
            setIsModalVisible(true);
        } else {
            message.error('添加失败！');
        }
    };

    // 数据请求
    useEffect(() => {
        getAllTypes();
    }, [getAllTypes]);
    const options = _.map(allType, item => {
        return {
            label: item.title,
            value: item._id,
            children: _.map(item.labels, i => {
                return {
                    label: i.title,
                    value: i._id
                }
            })
        }
    })

    const [isModalVisible, setIsModalVisible] = useState(false);


    const handleOk = () => {
        setIsModalVisible(false);
        history.push(`/info/comms/upload/${comm._id}`)
    };

    const handleCancel = () => {
        setIsModalVisible(false);
        history.push(`/info/comms`)
    };
    return (
        <Fragment>
            <Card>
                <Breadcrumb>
                    <Breadcrumb.Item>主页</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        新增商品
                    </Breadcrumb.Item>
                </Breadcrumb>
            </Card>
            <Card title="新增商品" bordered={true} style={{ margin: "30px" }}>

                <Form
                    {...formItemLayout}
                    form={form}
                    name="addComm"
                    onFinish={onFinish}
                    scrollToFirstError
                    style={{ width: "500px", margin: "auto" }}
                >
                    <Form.Item
                        name="name"
                        label="商品名"
                        rules={[
                            {
                                required: true,
                                message: '请输入商品名！',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="price"
                        label="商品价格"
                        rules={[
                            {
                                required: true,
                                message: '请输入商品价格！',
                            },
                        ]}
                    >
                        <InputNumber min={0} />
                    </Form.Item>
                    <Form.Item
                        name="type"
                        label="商品类型"
                        rules={[
                            {
                                required: true,
                                message: '请选择商品类型！',
                            },
                        ]}
                    >
                        <Cascader options={options} placeholder="请选择商品类型" ></Cascader>
                    </Form.Item>
                    <Form.Item
                        name="count"
                        label="商品库存"
                        rules={[
                            {
                                required: true,
                                message: '请输入商品库存！',
                            },
                        ]}
                    >
                        <InputNumber min={0} />
                    </Form.Item>

                    <Form.Item
                        name="desc"
                        label="商品详情"
                        rules={[
                            {
                                required: true,
                                message: '请输入商品详情！',
                            },
                        ]}
                    >
                        <TextArea rows={4} />
                    </Form.Item>

                    <Form.Item {...tailFormItemLayout}>
                        <Button type="primary" htmlType="submit">
                            新增商品
                        </Button>
                        <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                            <p>添加商品成功，是否继续添加商品图片？</p>
                        </Modal>
                    </Form.Item>
                </Form>
            </Card>

        </Fragment>
    )
}